<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>商品数据化系统</title>

<style>
body { overflow-x: hidden; }
#containingDiv { width: 960px; margin: 0 auto; }
@media screen and (min-width:1200px) {
	#containingDiv { width: 960px; margin: 0 auto; }
}
@media screen and (max-width:767px) {
	#containingDiv { width: 100%; margin: 0 auto; }
}
</style>

<link rel="stylesheet" href="${pageContext.request.contextPath}/joeone/sd/css/allinone_bannerWithPlaylist.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="${pageContext.request.contextPath}/joeone/sd/js/jquery-ui-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/joeone/sd/js/jquery.mousewheel.min.js"></script>
<script src="${pageContext.request.contextPath}/joeone/sd/js/allinone_bannerWithPlaylist.js"></script>

<script>
$(function() {
	$('#allinone_bannerWithPlaylist_elegant').allinone_bannerWithPlaylist({
		skin: 'elegant',
		responsive:true,
		width: 960,
		height: 381,
		origThumbImgW:90,
		origThumbImgH:90
	});
});
</script>
</head>

<body>
<h1>allinone playlist演示(elegant皮肤/响应式)</h1>

<!-- 代码开始 -->
<div id="containingDiv">
	<div id="allinone_bannerWithPlaylist_elegant" style="display:none;"> 
		<!-- 图片 -->
		<ul class="allinone_bannerWithPlaylist_list">
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/01_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit"><img src="images/elegant/01_elegantPlaylist.jpg" alt="" /></li>
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/02_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus."><img src="images/elegant/02_elegantPlaylist.jpg" alt="" /></li>
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/03_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti" data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend."><img src="images/elegant/03_elegantPlaylist.jpg" alt="" />
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/04_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie."><img src="images/elegant/04_elegantPlaylist.jpg" alt="" />
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/05_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit"><img src="images/elegant/05_elegantPlaylist.jpg" alt="" />
			<li data-bottom-thumb="${pageContext.request.contextPath}/joeone/sd/images/elegant/thumbs/06_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." data-link="http://www.sucaihuo.com/js/249.html" data-target="_blank"><img src="${pageContext.request.contextPath}/joeone/sd/images/elegant/06_elegantPlaylist.jpg" alt="" />
		</ul>
		
		<!-- 文字 -->
		<div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts">
			<div class="allinone_bannerWithPlaylist_text_line textElement11_elegant" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="294" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="text-transform:uppercase; font-weight:bold; padding-left:5px;">Up to 5 types of sliders</span><br />
				<span style="padding-left:5px;">Each with multiple SKINS</span></div>
		</div>
		<div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts">
			<div class="allinone_bannerWithPlaylist_text_line textElement21_elegant" data-initial-left="80" data-initial-top="30" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects<br />
				for images</div>
			<div class="allinone_bannerWithPlaylist_text_line textElement22_elegant" data-initial-left="280" data-initial-top="100" data-final-left="30" data-final-top="100" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts">
			<div class="allinone_bannerWithPlaylist_text_line textElement31_elegant" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
			<div class="allinone_bannerWithPlaylist_text_line textElement32_elegant" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
			<div class="allinone_bannerWithPlaylist_text_line textElement33_elegant" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="105" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
		</div>
		<div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts">
			<div class="allinone_bannerWithPlaylist_text_line textElement41_elegant" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="294" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="padding-left:5px;">Lorem <a href="http://www.sucaihuo.com/js/249.html" target="_blank">Ipsum</a> Dolor Sit Amet</span><br />
				<span style="padding-left:5px;">Consectetur Adiscipit</span></div>
		</div>
		<div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts">
			<div class="allinone_bannerWithPlaylist_text_line textElement51_elegant" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="270" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
			<div class="allinone_bannerWithPlaylist_text_line textElement52_elegant" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="250" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
		</div>
	</div>
</div>
<!-- 代码结束 -->










</body>
</html>